<template>
	<section id="city-list" class="city-list-container" style="display: block">
		<van-index-bar :index-list="indexList">
			<section>
				<template>
					<van-index-anchor index="定位"><div id="locate" class="city-title">定位城市</div></van-index-anchor>
					<div class="city-list city-list-inline clearfix">
						<div class="location-city">定位失败，请点击重试</div>
					</div>
				</template>
			</section>

			<section class="history-city-list">
				<van-index-anchor index="最近"><div id="history" class="city-title">最近访问城市</div></van-index-anchor>
				<div class="city-list city-list-inline clearfix">
					<div class="city-item" data-nm="阿拉善盟" data-id="150" @click="pickCity(150, '阿拉善盟')">阿拉善盟</div>
					<div class="city-item" data-nm="武汉" data-id="57" @click="pickCity(57, '武汉')">武汉</div>
				</div>
			</section>

			<section>
				<van-index-anchor index="热门"><div id="hot" class="city-title">热门城市</div></van-index-anchor>
				<div class="city-list city-list-inline clearfix">
					<div class="city-item" :data-nm="hot.name" data-id="10" v-for="hot in hotCities" :key="hot.id" @click="pickCity(hot.id, hot.name)">
						{{ hot.name }}
					</div>
				</div>
			</section>

			<section>
				<template v-for="(city, key) in cities">
					<van-index-anchor :index="key">
						<div :id="key" class="city-title city-title-letter">{{ key }}</div>
					</van-index-anchor>
					<div class="city-list city-list-block clearfix">
						<div class="city-item" :data-nm="ci.name" :data-id="ci.id" v-for="ci in city" @click="pickCity(ci.id, ci.name)">{{ ci.name }}</div>
					</div>
				</template>
			</section>
		</van-index-bar>
	</section>
</template>

<script>
import './citypick.css'
import Vue from 'vue'
import { IndexBar, IndexAnchor } from 'vant'
// import cities from './cities.json'
import { mapActions } from 'vuex'

Vue.use(IndexBar)
Vue.use(IndexAnchor)
export default {
	data() {
		return {
			indexList: ['定位', '最近', '热门'],
			cities: [],
			hotCities: []
		}
	},
	methods: {
		pickCity(id, name) {
			console.log(id, name)
			this.changeCity({ id, name })
			this.$router.back()
		},
		...mapActions(['changeCity'])
	},
	async mounted() {
		let { data: result } = await this.$http.get('/cities.json')
		this.cityData = result
		console.log(result)
		this.indexList = [...this.indexList, ...Object.keys(result.cities)]
		// console.log(cities typeof result)
		this.hotCities = result.hotCities
		this.cities = result.cities
	}
}
</script>

<style style='less' scoped>
</style>
